<template>
  <continer>
    <template slot="search">
      <QuickSearch
        :advForm="quickSearchForm"
        @QuickSearch="handleSearch"
      ></QuickSearch>
    </template>
    <template slot="oprate">
      <el-button type="primary" size="mini" @click="handleSearch"
        >查询</el-button
      >
    </template>
    <template slot="content">
      <configTable
        :headers="tableHeaders"
        :data="tableData"
        :pagingData="pagingData"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange"
        @checkHeadersChange="checkHeadersChange"
      >
        <template slot="column">
          <template v-for="(item, index) in checkHeaders">
            <u-table-column
              v-if="!['status'].includes(item.prop) && item.show"
              :show-overflow-tooltip="true"
              :resizable="false"
              :prop="item.prop"
              :label="item.label"
              :key="index"
              :sortable="item.sortable"
            >
            </u-table-column>
            <u-table-column
              v-if="['status'].includes(item.prop) && item.show"
              :show-overflow-tooltip="true"
              :resizable="false"
              :prop="item.prop"
              :label="item.label"
              :key="index"
              :sortable="item.sortable"
            >
              <template slot-scope="{ row }">
                <span>{{ row.status | getStatusName }}</span>
              </template>
            </u-table-column>
          </template>
        </template>
      </configTable>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import configTable from '@/components/configCommon/table.vue'
import QuickSearch from '@/common/views/advancedSearch/QuickSearch.vue'
import { IvrModule } from '@/store/modules/config/ivr'
interface DrawerObj {
  form: object
}

interface PageData {
  total: number
  limit: number
  page: number
}
@Component({
  name: 'ServiceNumber',
  components: { continer, configTable, QuickSearch },
  filters: {
    getStatusName (val: any) {
      switch (val) {
        case 'enable':
          return '启用'
        case 'disable':
          return '停用'
      }
    }
  }
})
export default class extends Vue {
  [x: string]: any
  private pagingData: PageData = { total: 0, limit: 10, page: 1 } // 翻页相关的数据控制
  private tableHeaders: object[] = [ // 表头信息
    { label: '呼转号码', prop: 'number' },
    { label: '号码能力', prop: 'callAbilityName' },
    { label: '状态', prop: 'status' },
    { label: '创建时间', prop: 'createTime' }
  ]

  private typeArr: any = [
    { name: '启用', _id: 'enable' },
    { name: '停用', _id: 'disable' }
  ]

  private quickSearchForm: any = { // 快捷检索数据
    form: {
      number: '',
      status: []
    },
    advSearchOptions: [
      { label: '呼转号', inputType: 'input', placeholder: '请输入呼转号', name: 'number', clearable: true },
      { label: '状态', inputType: 'select', clearable: true, multiple: true, selectData: this.typeArr, name: 'status' }
    ]
  }

  private checkHeaders: [] = [] // 当前展示的表头信息

  private tableData: object[] = [] // table数据

  private handleSearch () { // 点击查询
    this.pagingData.page = 1
    this.fetchData()
  }

  private pageChange (page) { // 翻页
    this.pagingData.page = page
    this.fetchData()
  }

  private pageSizeChange (size) { // 每页多少条数据
    this.pagingData.limit = size
    this.pagingData.page = 1
    this.fetchData()
  }

  private checkHeadersChange (checkList) { // 设置表头
    this.$set(this, 'checkHeaders', checkList)
  }

  private getCallAbility (num: any) {
    switch (num) {
      case 4:
        return '外呼呼叫座席'
      case 5:
        return '呼入呼叫座席'
      case 6:
        return '呼转都支持'
    }
  }

  private fetchData () { // 查列表
    const actionData = Object.assign({ limit: this.pagingData.limit, page: this.pagingData.page }, this.quickSearchForm.form)
    const data = { url: '/call/action/config/callAgentNumber/query', method: 'POST', data: actionData }
    IvrModule.IvrCommonAction(data).then((res: any) => {
      if (res && res.success) {
        const list = res.list || []
        list.forEach(item => {
          item.callAbilityName = this.getCallAbility(item.callAbility)
        })
        this.tableData = list
        this.pagingData.total = res.count || 0
      }
    })
  }

  private beforeMount () {
    this.fetchData()
  }
}
</script>

<style lang="stylus" scoped></style>
